<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<!-- For Resposive Device -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- For IE -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>ChinaZ</title>

	<link rel="stylesheet" href="./css/title.css">
	<link rel="stylesheet" href="css/style1.css">
	<link rel="stylesheet" href="css/responsive.css">

	<!-- m的样式引入 -->
	<link href="css/111.css" rel="stylesheet" type="text/css" />
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/city-picker.data.js"></script>
	<script src="js/city-picker.js"></script>
	<style>
		span.placeholder {
			display: none !important;
		}

		span.title {
			display: none;
		}

		span.select-item {
			display: none !important;
		}

		.city-select-tab {
			height: 50px !important;
			line-height: 50px;
			background: #f3f3f3;
			box-shadow: 3px 3px 3px 3px #888888;
			cursor: pointer;

		}

		.city-select-tab a {
			margin: 0 20px;
			color: #333333;
			font-size: 18px;
			cursor: pointer;
		}

		.city-select {
			background: #ffffff;
			/* border: solid #666666 1px; */
			box-shadow: 3px 3px 3px #888888;
			cursor: pointer;
		}

		.clearfix {
			margin-left: 10px;
		}

		.clearfix dd a {
			color: #333333;
			margin: 3px 10px;
			font-size: 16px;
		}
	</style>

</head>

<body>

	<div class="main-page-wrapper">

		<!-- =====导航栏开始 ======= -->
		<div class="navbar navbar-fixed-top custom-navbar" role="navigation">
			<div class="container">

				<!-- navbar header -->
				<div class="navbar-header">

					<a href="#" class="navbar-brand">宠爱有家</a>
				</div>

				<div class="collapse navbar-collapse">

					<ul class="nav navbar-nav navbar-right">
						<li><a href="../index/index.html" class="smoothScroll">首页</a></li>
						<li><a href="../领养展示页面/about.html" class="smoothScroll">领养</a></li>
						<li><a href="../宠物店展示/宠物店展示.html" class="smoothScroll">寄养</a></li>
						<li><a href="../index/上架.html" class="smoothScroll">为小可爱找主人</a></li>
						<li><a href="../领养展示页面/about.html" class="smoothScroll">购买宠物</a></li>
						<li><a href="../index/博客.html" class="smoothScroll">社区</a></li>
						<li><a href="../个人端页面/账号管理.html" class="smoothScroll">个人中心</a></li>
						<li><a href="../联系我们/lxwm.html" class="smoothScroll">联系我们</a></li>
					</ul>

				</div>

			</div>
		</div>

		<section id="intro" class="parallax-section">
			<div class="container">
				<div class="row">

					<div class="col-md-12 col-sm-12">
						<h3 class="wow bounceIn" style="color: aliceblue" data-wow-delay="0.9s">背景标题</h3>
						<h1 class="wow fadeInUp" style="color: aliceblue" data-wow-delay="1.6s">宠爱有家</h1>
					</div>


				</div>
			</div>
		</section>

		<section class="banner-bottom-section">
			<div class="container-fluid">
				<div class="row messagebox">
					<div class="col-md-2 col-xs-3">
						<div class="messageleft">
							<ul class="Fstage">
								<li><a href="#"><em class="e1"></em>个人中心<div class="clear"></div></a>
									<ul class="Tstage">
										<li><a href="账号管理.html">账号管理</a></li>
										<li><a href="物流详情.html">物流详情</a></li>
										<li><a href="历史订单.html">历史订单</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md-10 col-xs-9">
						<div class="messageright">
							<div class="formpage">
								<div class="clear" style="height:20px"></div>
								<h2>账户信息</h2>
								<div class="clear" style="height:30px"></div>

								<span class="information">
									<div class="clear" style="height:10px"></div>
									<div class="con4">
										<canvas id="cvs" width="200" height="200"></canvas>
										<span class="btn upload">
											上传头像
											<input type="file" class="upload_pic" id="upload" />
										</span>
									</div>
									<form>
										<table style="position: relative;">
											<tr>
												<td>用户名：</td>
												<td colspan="2">
													<div class="freeze-td"><input class="textput" type="text"
															value="测试体验店" />
													</div>
												</td>
												<td>
													<button type="button" class="link"
														id="edit-info">&nbsp;&nbsp;修改信息</button>
												</td>
											</tr>

											<tr>
												<td>电子邮箱：</td>
												<td>
													<div class="freeze-td">
														<input class="textput" placeholder="请输入店铺联系邮箱" type="text"
															value="123@gmail.com" />
													</div>
												</td>
											</tr>
											<tr>
												<td>真实姓名：</td>
												<td>
													<div class="freeze-td">
														<input class="textput" placeholder="管理人员姓名" type="text"
															value="张三" />
													</div>
												</td>
											</tr>
											<tr>
												<td>性别：</td>
												<td>
													<div class="freeze-td">
														<label>女<input name="sex" type="radio"></label>
														<label>男<input checked name="sex" type="radio"></label>
													</div>
												</td>
											</tr>
											<tr>
												<td>生日：</td>
												<td>
													<div class="freeze-td"><input class="textput" type="date"
															value="2019-09-05" />
													</div>
												</td>
											</tr>
											<tr>
												<td>所在地区：</td>
												<td class="address">
													<div class="freeze-td"><input class="addr" type="text"
															data-toggle="city-picker" id="city-picker3" readonly
															value="请选择" />
													</div>
												</td>
												<td>
													<p class="wrrong"></p>
												</td>
											</tr>
											<tr>
												<td>QQ：</td>
												<td>
													<div class="freeze-td"><input class="textput" type="text"
															value="123456" />
													</div>
												</td>
												<td>
													<p class="wrrong"></p>
												</td>
											</tr>
											<tr>
												<td>阿里旺旺：</td>
												<td>
													<div class="freeze-td"><input class="textput" type="text"
															value="阿里旺旺" />
													</div>
												</td>
												<td>
													<p class="wrrong"></p>
												</td>
											</tr>
											<tr>
												<td></td>
												<td colspan="2">
													<button type="button" class="greenbtn submit-btn"
														data-target=".bs-example-modal-sm"
														data-toggle="modal">提交保存</button></td>
											</tr>
										</table>
									</form>
									<div class="clear"></div>
								</span>
								<div class="clear" style="height:50px"></div>

								<button aria-label="Close" class="close" data-dismiss="alert" type="button">
									<span aria-hidden="true">&times;</span>
								</button>

							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>

	<footer>
		<div class="container">
			<div class="top-footer row">
				<div class="col-md-5 col-sm-7 col-xs-12 footer-logo">
					<a href="#"><img src="images/them-logo/them-main-logo-2.jpg" alt="Logo"></a>
					<p><span class="p-color">myPet</span> was established in 2017 by Pet business veterans, Rod
						Davies and Matthew Levington, the journey began when founders Matthew Levington and Rod
						Davies, met up in 2017 over a beer</p>
					<ul class="icon">
						<li><a href="" class="tran3s"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="" class="tran3s"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
						<li><a href="" class="tran3s"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
						<li><a href="" class="tran3s"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					</ul>

					<ul class="policy">
						<li><a href="" class="tran3s">Privacy Policy </a></li>
						<li><a>|</a></li>
						<li><a href="" class="tran3s">Legal Policy</a></li>
					</ul>
				</div> <!-- /.footer-logo -->

				<div class="col-md-4 col-sm-5 col-xs-12 footer-list">
					<h5>Important Links</h5>

					<ul>
						<li><a href="#" class="tran3s">首页</a></li>
						<li><a href="#" class="tran3s">关于我们 </a></li>
						<li><a href="#" class="tran3s">寄养</a></li>
						<li><a href="shop.html" class="tran3s">领养</a></li>
						<li><a href="#" class="tran3s">出售</a></li>
						<li><a href="#" class="tran3s">新闻</a></li>
						<li><a href="#" class="tran3s">社区</a></li>
					</ul>
					<ul>
						<li><a href="#" class="tran3s">宠物</a></li>
						<li><a href="#" class="tran3s">我们的历史</a></li>
						<li><a href="#" class="tran3s">我们做了什么</a></li>

					</ul>
				</div> <!-- /.footer-list -->

				<div class="col-md-3 col-xs-12 footer-news">
					<h5>News Update</h5>

					<ul>
						<li>
							<h6><a href="#" class="tran3s">Prefinished Solid Hardwood Flooring</a></h6>
							<span>january 02,2017</span>
						</li>
						<li>
							<h6><a href="#" class="tran3s">Latst pet care in summer 12 care them well</a></h6>
							<span>january 02,2017</span>
						</li>
					</ul>
				</div> <!-- /.footer-news -->
			</div> <!-- /.top-footer -->
		</div> <!-- /.container -->

		<div class="bottom-footer">
			<div class="container">
				<p class="float-left">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
						href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				<form action="#" class="float-right">
					<input type="text" placeholder="Your Email">
					<button class="tran3s p-bg-color">Subscribe</button>
				</form>
			</div> <!-- /.container -->
		</div> <!-- /.bottom-footer -->
	</footer>

	</div> <!-- /.main-page-wrapper -->


	<!-- Scroll Top Button -->
	<button class="scroll-top tran7s p-color-bg">
		<i class="fa fa-angle-up" aria-hidden="true"></i>
	</button>

	<!-- pre loader  -->
	<div id="loader-wrapper">
		<div id="loader"></div>
	</div>



	<!-- js file -->
	<!-- Main js file/jquery -->
	<script src="vendor/jquery-2.2.3.min.js"></script>
	<!-- bootstrap-select.min.js -->
	<script src="vendor/bootstrap-select-1.10.0/dist/js/bootstrap-select.min.js"></script>
	<!-- bootstrap js -->
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
	<!-- camera js -->
	<script src="vendor/Camera-master/scripts/camera.min.js"></script>
	<script src="vendor/Camera-master/scripts/jquery.easing.1.3.js"></script>
	<!-- Owl carousel -->
	<script src="vendor/OwlCarousel2/dist/owl.carousel.min.js"></script>
	<!-- appear & countTo -->
	<script src="vendor/jquery.appear.js"></script>
	<script src="vendor/jquery.countTo.js"></script>
	<!-- fancybox -->
	<script src="vendor/fancybox/dist/jquery.fancybox.min.js"></script>
	<!-- Gallery - isotop -->
	<script type="text/javascript" src="vendor/isotope.pkgd.min.js"></script>
	<!-- WOW js -->
	<script type="text/javascript" src="vendor/WOW-master/dist/wow.min.js"></script>
	<!-- Circle Progress -->
	<script type="text/javascript" src="vendor/circle-progress.js"></script>
	<!-- Style js -->
	<script src="./js/title.js"></script>
	<script src="js/custom.js"></script>

</body>

</html>
<script>
	$(".Fstage>li").click(function () {
		if ($(this).children("ul").hasClass("Tstage"))
			$(this).siblings("li").children("ul").hide();
		$(this).children("ul").slideDown();
	});
	$('.freeze-td').addClass('freeze-td-disabled');

	$('#edit-info').click(function () {
		console.log('000')
		$('.freeze-td').removeClass('freeze-td-disabled');
	});

	$('.submit-btn').click(function () {
		var judge = $('.freeze-td').hasClass('freeze-td-disabled');
		console.log(judge);
		if (judge) {
			$('.modal-text').html('您未作修改，请修改后再试');
			return;
		} else {
			$('.modal-text').html('提交成功，正在等待审核中...');
		}
		$("#alert-tips").show();
		$('.freeze-td').addClass('freeze-td-disabled');
	})
		< script >
			//获取上传按钮
			var input1 = document.getElementById("upload");
	if (typeof FileReader === 'undefined') {
		//result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
		input1.setAttribute('disabled', 'disabled');
	} else {
		input1.addEventListener('change', readFile, false);

	}

	function readFile() {
		var file = this.files[0]; //获取上传文件列表中第一个文件
		if (!/image\/\w+/.test(file.type)) {
			//图片文件的type值为image/png或image/jpg
			alert("文件必须为图片！");
			return false;
		}
		// console.log(file);
		var reader = new FileReader(); //实例一个文件对象
		reader.readAsDataURL(file); //把上传的文件转换成url
		//当文件读取成功便可以调取上传的接口
		reader.onload = function (e) {

			var image = new Image();
			// 设置src属性 
			image.src = e.target.result;
			var max = 200;
			// 绑定load事件处理器，加载完成后执行，避免同步问题
			image.onload = function () {
				// 获取 canvas DOM 对象 
				var canvas = document.getElementById("cvs");
				// 获取 canvas的 2d 环境对象, 
				var ctx = canvas.getContext("2d");
				// canvas清屏 
				ctx.clearRect(0, 0, canvas.width, canvas.height);

				ctx.drawImage(image, 0, 0, 200, 200);

			};
		}
	};
</script>